<template>
    <div style="padding:10px;">
        <a-button shape="round" size="small" type="primary"  @click="handleGenerate">生成图片</a-button>
    
    <div style="position:relative;background:red;">
        
        <div style="position: absolute;top:0px;left:0px;">
            <a-form layout="inline" >
                <a-divider orientation="left">选择题</a-divider>
                <a-card :bordered="false" >
                    <a-form-item label="1.sasdasdasda"></a-form-item>
                    <a-form-item >
                        <a-tooltip :visible="true">
                            <template slot="title">
                                prompt text
                            </template>
                            <a-input size="small" style="width:100px;"/>
                        </a-tooltip>
                    </a-form-item>
                    <a-form-item ><a-input size="small"  style="width:100px;"/>
                        <a-tooltip :visible="true">
                            <template slot="title">
                                prompt text
                            </template>
                            <a-input size="small" style="width:100px;"/>
                        </a-tooltip>
                    </a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                    <a-form-item label="和"><a-input size="small" style="width:100px;"/></a-form-item>
                </a-card>

                <a-card :bordered="false" >
                    <a-form-item label="2.safsa"></a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/>
                    <a-tooltip :visible="true">
                            <template slot="title">
                                <a-icon type="close" />
                            </template>
                            <a-input size="small" style="width:100px;"/>
                        </a-tooltip>
                    </a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                </a-card>
                <a-card :bordered="false" >
                    <a-form-item label="2.safsa"></a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                </a-card>
                <a-card :bordered="false" >
                    <a-form-item label="2.safsa"></a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                </a-card>
                <a-card :bordered="false" >
                    <a-form-item label="2.safsa"></a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                </a-card>
                <a-card :bordered="false" >
                    <a-form-item label="2.safsa"></a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                </a-card>
                <a-card :bordered="false" >
                    <a-form-item label="2.safsa"></a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                </a-card>
                <a-card :bordered="false" >
                    <a-form-item label="2.safsa"></a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                </a-card>
                <a-card :bordered="false" >
                    <a-form-item label="2.safsa"></a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                </a-card>
                <a-card :bordered="false" >
                    <a-form-item label="2.safsa"></a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                </a-card>
                <a-card :bordered="false" >
                    <a-form-item label="2.safsa"></a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                    <a-form-item ><a-input size="small" style="width:100px;"/></a-form-item>
                </a-card>
            </a-form>
        </div>
        <!-- <div style="position: absolute;top:0px;left:0px;">
            <vue-esign ref="esign" :isCrop="isCrop" :lineWidth="lineWidth"  :width="width" :height="height" :quality="0.1"
                :lineColor="lineColor" :bgColor.sync="bgColor" :isClearBgColor="false"/>
        </div> -->

       

       
    </div>

    
    </div>
</template>

<script>

import {SysMixin} from '@/mixins/SysMixin'
import defaultSettings from '@/config/defaultSettings'
import vueEsign from 'vue-esign'

export default {
    name:'juanzi',
    components:{vueEsign},
    mixins:[SysMixin],
    data(){
        return{
            defaultSettings,
            lineWidth: 1,
            lineColor: '#000000',
            bgColor: '',
            resultImg: '',
            isCrop: false,
            signatureData:null,
            width:document.documentElement.clientWidth,
            height:document.documentElement.clientHeight,
            shiti:[
                {type:'选择题',list:[
                    {id:1,content:'sfsdafsafssafsafsd{}'}
                ]}
            ]
           
            
            
        }
    },
    mounted(){
        
    },
    methods:{
         handleGenerate () {
            this.$refs.esign.generate().then(res => {
                this.resultImg = res
                console.log(this.resultImg)
            }).catch(err => {
                alert(err) // 画布没有签字时会执行这里 'Not Signned'
            })
        },
        
    }
    
}
</script>

<style scoped>

::v-deep .ant-input{
    border-left: none !important;
    border-top: none !important;
    border-right: none !important;
    box-shadow: none !important;
    background-color: #ffffff !important;
    color:rgba(0,0,0, 0.8) !important;
}
::v-deep .ant-input-number{
    border: none !important;
    box-shadow: none !important;
    background-color: #ffffff !important;
    color:rgba(0,0,0, 0.8) !important;
}
::v-deep .ant-select-selection{
    border: none !important;
    box-shadow: none !important;
    background-color: #ffffff !important;
    color:rgba(0,0,0, 0.8) !important;
}


</style>